<template>
  <el-row>
    <el-col :span="3" style="margin-bottom: 8px">
      <p class="pinformation">搜索条件</p>
    </el-col>
  </el-row>
  <el-form
    label-width="130px"
    :model="queryParams"
    ref="tabsPackageRef"
    @submit.native.prevent
  >
    <el-row>
      <el-col :span="10">
        <el-form-item label="项目方法包名称：" prop="packageName">
          <el-input
            clearable
            v-model="queryParams.packageName"
            maxlength="100"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-row justify="center">
          <el-button type="success" @click="handleQuery('package')"
            >搜索</el-button
          >
          <el-button class="business resetBtn" @click="resetQuery"
            >重置</el-button
          >
        </el-row>
      </el-col>
    </el-row>
  </el-form>

  <el-row>
    <p class="pinformation">项目方法包列表</p>
    <p class="totalStyle">共 {{ total }} 条数据</p>
  </el-row>
  <el-table
    id="jcxmPackageTable"
    :data="packageList"
    height="580px"
    ref="jcxmPackageTableRef"
    v-loading="loading"
    border
    :highlight-current-row="highLightRow"
    @row-click="rowClick"
    row-key="mJId"
    :tree-props="{ children: 'methodJcxmList' }"
    @select="handleSelectionChange"
    @select-all="handleAllSelectionChange"
  >
    <el-table-column type="selection" width="55" align="center" :selectable="selectable"/>
    <el-table-column show-overflow-tooltip label="项目方法包名称" align="left">
      <template #default="scope">
        <div :id="scope.row.packageId" style="display: inline-block;">{{ scope.row.packageName }}</div>
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip label="检测项目数" align="center" prop="jcxmCount">
      <template #default="scope">
         <template v-if="scope.row.jcxmCount">
          {{scope.row.jcxmCount}}
         </template>
         <template v-if="scope.row.children?.length > 0">
          <el-popover
    placement="top"
    :width="300"
    trigger="hover"
    effect="light"
    :content="handleDisplayJcxm(scope.row.children)"
  >
    <template #reference>
      <el-link type="primary">{{scope.row.children.length}}</el-link>
    </template>
  </el-popover>

          
         </template>
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip label="检测项目" align="center" prop="jcxmName" />
    <el-table-column show-overflow-tooltip label="方法名称" align="center" prop="methodName" />
    <el-table-column show-overflow-tooltip label="方法编号" align="center" prop="methodCode" />
  </el-table>
  <pagination
    v-show="total > 0"
    :total="total"
    v-model:page="queryParams.pageNum"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
  />
</template>
<script setup>
import $ from "jquery";
import {
  listJcxmPackage,
  addPackageTaskJcxm,
  deleteSelectedJcxmByPackage,
} from "@/api/contract/taskPoint";
const { proxy } = getCurrentInstance();
const highLightRow = ref(true); // 表格选中高亮样式
const loading = ref(false);
const total = ref(0);
const packageList = ref([]); // 右侧检测项目列表搜索结果
const props = defineProps({
  params: {
    type: Object,
  },
  // 父组件中的方法
  handleSelectionChange: {
    type: Function,
  },
});

const data = reactive({
  jcxmForm: {
    isPackage: "0",
    isMethod: "0",
    isSum: "0",
  },
  queryParams: {
    pageNum: 1, // 当前页数
    pageSize: 10, // 当前页显示条数
  },
});
const { queryParams, jcxmForm } = toRefs(data);

watch(
  () => props.params.isPackage,
  (val) => {
    if (val) {
      jcxmForm.value.isPackage = val;
    }
  }
);

watch(
  () => props.params.packageId,
  (val) => {
    if (val) {
      jcxmForm.value.packageId = val;
      jcxmForm.value.packageName = props.params.packageName;
    } else {
      delete jcxmForm.value.packageId;
      delete jcxmForm.value.packageName;
    }
  }
);

watch(
  () => props.params.isCollect,
  (val) => {
    if (val) {
      jcxmForm.value.isCollect = val;
    }
  }
);

// 对外暴露以下方法或变量
defineExpose({
  setFormParams,
  reselection,
});
function setFormParams(paramsForm) {
  if (!paramsForm.pointId || !paramsForm.pointJclbId) return;
  Object.assign(jcxmForm.value, paramsForm);
  queryParams.value.params = { pointId: paramsForm.pointId };
  queryParams.value.jclbId = paramsForm.pointJclbId;
  handleQuery();
}
// 获取检测项目列表数据
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  proxy.resetForm("tabsPackageRef");
  handleQuery();
}

function selectable(row) {
  if (row.mJId) {
    return false;
  } else {
    return true;
  }
}

function getList() {
  loading.value = true;
  listJcxmPackage(queryParams.value).then((res) => {
    packageList.value = res.rows;
    total.value = res.total;
    loading.value = false;
    // 是否默认勾选通过id判断
    nextTick(() => {
      packageList.value.forEach((row) => {
        if (row.params && row.params.cJId) {
          proxy.$refs["jcxmPackageTableRef"].toggleRowSelection(row);
        }
      });
    });
  });
}
const emit = defineEmits(["setJcxmCount", "pointMove"]);

function handleAllSelectionChange(selection) {
  if (jcxmForm.value.isPackage == 1 && !jcxmForm.value.packageId) {
    proxy.$modal.msgError("分包公司不能为空！");
    return;
  }
  if (selection.length > 0) {
    //当前操作是选中
    let packageIds = selection.map((item) => item.packageId);
    jcxmForm.value.packageIds = packageIds;
    var headerCheckbox = $(
      "#jcxmPackageTable table thead tr label.el-checkbox"
    )[0];
    addPackageTaskJcxm(jcxmForm.value).then((res) => {
      let data = {
        jcxmCount: res.data.jcxmCount,
        jcxmPCount: res.data.jcxmPCount,
      };
      emit("setJcxmCount", data);
      if (jcxmForm.value.isPackage == 0)
        emit("pointMove", headerCheckbox, $("#openSelJcxmDialog"));
      else emit("pointMove", headerCheckbox, $("#openSelJcxmDialog1"));
    });
  } else {
    let packageIds = packageList.value.map((item) => item.packageId);
    jcxmForm.value.packageIds = packageIds;
    deleteSelectedJcxmByPackage(jcxmForm.value).then((res) => {
      let data = {
        jcxmCount: res.data.jcxmCount,
        jcxmPCount: res.data.jcxmPCount,
      };
      emit("setJcxmCount", data);
    });
  }
}

function handleSelectionChange(selection, row) {
  if (
    jcxmForm.value.isPackage == 1 &&
    proxy.parseStrEmpty(jcxmForm.value.packageId).length == 0
  ) {
    proxy.$refs["jcxmPackageTableRef"].toggleRowSelection(row);
    proxy.$modal.msgError("分包公司不能为空！");
    return;
  }
  //选中行的主键即任务检测项目的主键，根据此值判断当前操作是选中还是取消选中。
  jcxmForm.value.packageIds = [row.packageId];
  if (selection.indexOf(row) == -1) {
    //当前操作是取消选中
    deleteSelectedJcxmByPackage(jcxmForm.value).then((res) => {
      delete row.params;
      let data = {
        jcxmCount: res.data.jcxmCount,
        jcxmPCount: res.data.jcxmPCount,
      };
      emit("setJcxmCount", data);
    });
  } else {
    //当前操作是选中
    addPackageTaskJcxm(jcxmForm.value).then((res) => {
      let data = {
        jcxmCount: res.data.jcxmCount,
        jcxmPCount: res.data.jcxmPCount,
      };
      emit("setJcxmCount", data);
      let checkboxTd = $("#" + row.packageId)
        .parents("td")
        .prev();
      if (jcxmForm.value.isPackage == 0)
        emit("pointMove", checkboxTd[0], $("#openSelJcxmDialog"));
      else emit("pointMove", checkboxTd[0], $("#openSelJcxmDialog1"));
    });
  }
}

function reselection() {
  getList()
}

function rowClick() {
  highLightRow.value = true;
}

function handleDisplayJcxm(jcxmList){
  let jcxmStr = "";
  jcxmList.forEach((item,index) => {
      if(index > 0){
        jcxmStr += "、";
      }
      jcxmStr += item.jcxmName;
  })
  return jcxmStr;
}
</script>
